<template>
  <!-- 访客记录-详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    :title="title"
    cancelContext="取消"
    confirmContext="提交"
    modalStyle="detailModal"
    width="980px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <div class="custome-wrap flex">
        <div class="left f2 flex align-center justify-center imageUpload">
          <a-upload
            :customRequest="customRequest"
            :file-list="fileList"
            :remove="remove"
            :showUploadList="showUploadList"
            accept="image/png, image/JPG,image/jpeg"
            class="avatar-uploader"
            list-type="picture-card"
            @change="picturesChange"
          >
            <div v-if="fileList.length < 1">
              <img alt="" class="pictIcon" src="@/assets/imgs/pict-icon.png" />
              <p class="imgText">点击上传</p>
            </div>
          </a-upload>
        </div>
        <div class="right f8 flex column align-center">
          <div class="search-group" style="padding: 0px; width: 100%">
            <div class="input-wrap" style="width: 100%">
              <div class="label xing">名称:</div>
              <div class="input-item" style="width: 100%">
                <a-input v-model="regulationsName" :maxLength="30" clearable placeholder="请输入法律法规名称" />
              </div>
            </div>
          </div>

          <div class="search-group" style="padding: 0px; width: 100%; margin-top: 20px">
            <div class="input-wrap" style="width: 100%">
              <div class="label">描述:</div>
              <div class="input-item" style="width: 100%">
                <a-textarea
                  v-model="regulationsMemo"
                  :maxLength="50"
                  clearable
                  placeholder="请输入法律法规描述"
                  style="height: 100px; overflow: auto; resize: none"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </public-modal>
</template>
<script>
import publicModal from '@/components/publicModal'
import { uploadFile } from '@/api/api'
import { comMethods } from '@/mixins/comMethods'
import { lawADD, lawEdit } from '@/api/law'
export default {
  name: 'addEditModal',
  components: { publicModal },
  mixins: [comMethods],
  data() {
    return {
      records: {},
      publicVisible: false,
      // queryParam: {},
      regulationsMemo: '',
      regulationsName: '',
      imageUrl: [],
      fileList: [],
      showUploadList: {
        showPreviewIcon: false,
      },
    }
  },
  methods: {
    show(records) {
      this.records = records
      if (records && records.id) {
        this.title = '编辑法律法规'
        if (records.regulationsImage) {
          let obj = {
            uid: 0,
            name: 'image.png',
            status: 'done',
            url: this.imgPrefix + records.regulationsImage,
          }
          this.fileList[0] = obj
          this.imageUrl[0] = records.regulationsImage
        }
        this.regulationsName = records.regulationsName
        this.regulationsMemo = records.regulationsMemo
      } else {
        this.title = '新增法律法规'
      }
      this.publicVisible = true
    },

    picturesChange(info) {
      info.file.status = 'done'
      this.fileList = info.fileList
    },

    remove(file) {
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.imageUrl.splice(index, 1)
    },

    async customRequest(info) {
      const isJpgOrPng =
        info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg，png，jpeg格式图片!')
        return
      }
      this.isLt2M = info.file.size / 1024 / 1024 < 2
      if (!this.isLt2M) {
        this.$message.warn('请上传小于200KB的照片!')
      }

      if (isJpgOrPng && this.isLt2M) {
        let file = info.file
        const formData = new FormData()
        formData.append('file', file)
        formData.append('type', 12)
        let res = await uploadFile(formData)
        if (res.code == 200) {
          this.imageUrl.push(res.result.halfPath)
        }
      }
    },

    async handleOk() {
      if (this.regulationsName == '') {
        this.$message.warn('请输入法律名称')
        return
      }
      let reg =
        /\ |\【|\】|\（|\）|\，|\。|\？|\、|\；|\：|\‘|\’|\“|\”|\！|\《|\》|\￥|\……|\——|\/|\~|\!|\@|\#|\\$|\%|\^|\&|\*|\(|\)|\_|\+|\{|\}|\:|\<|\>|\?|\[|\]|\,|\.|\/|\;|\'|\`|\-|\=|\\\|\|/
      if (reg.test(this.regulationsName) == true) {
        this.$message.error('不可以输入特殊字符,请重试')
        return
      }

      // if (this.imageUrl && this.imageUrl.length < 1) {
      //   this.$message.warn('请上传法典封面')
      //   return
      // }

      let data = {
        regulationsName: this.regulationsName,
        regulationsMemo: this.regulationsMemo,
        regulationsImage: this.imageUrl[0] || '',
      }
      if (this.title == '新增法律法规') {
        let res = await lawADD(data)
        this.$message.success(res.message)
        this.cancel()
        this.$emit('refresh')
      } else {
        data.id = this.records.id
        let res = await lawEdit(data)
        this.$message.success(res.message)
        this.cancel()
        this.$emit('refresh')
      }
    },
    cancel() {
      this.publicVisible = false
      this.fileList = []
      this.imageUrl = []
      this.regulationsName = ''
      this.regulationsMemo = ''
    },
  },
}
</script>
<style lang="less" scoped>
.imageUpload {
  /deep/.avatar-uploader {
    > .ant-upload {
      width: 160px;
      height: 160px;
      background: var(--theme-container-bg);
      border: 1px solid var(--theme-input-border);
    }
  }

  /deep/.ant-upload-select-picture-card {
    width: 160px;
    height: 160px;
  }

  /deep/ .ant-upload-list-item {
    width: 160px;
    height: 160px;
  }

  .imgText {
    color: #1163b8;
    font-weight: 500;
  }

  .pictIcon {
    margin-bottom: 10px;
    width: 42px;
    height: 38px;
  }

  .notice {
    padding-left: 0;
    padding-top: 15px;
    color: #1163b8;
    font-weight: 500;
  }
}
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}
.f2 {
  flex: 2;
}
.f8 {
  flex: 8;
}
</style>
